// components/navigationBar/navigationBar.js
// app.js 添加屏幕适配方法对应方法
var app =getApp()

Component({
  /**
   * 组件的属性列表
   */
  properties: {
    // 标题
    title: {
      type: String,
      value: "标题"
    },
    // 是否需要渐变效果
    isScrollEffect: {
      type: Boolean,
      value: true
    },
    // 默认:背景颜色
    backgroundColor: {
      type: String,
      value: ""
    },
    // 二级:背景颜色
    subBackgroundColor: {
      type: String,
      value: "#2D7AF6"
    },
    // 默认:字体颜色
    fontColor: {
      type: String,
      value: "black"
    },
    // 二级:字体颜色
    subFontColor: {
      type: String,
      value: "white"
    },
    // 字体大小
    fontSize:{
      type: String,
      value: "32"
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    // 路由深度
    routerLength: 1,
    backgroundOpacity: 0,
  },

  /**
   * 组件的方法列表
   */
  methods: {
    clickNavBack() {
      wx.navigateBack()
    },
    clickNavBackHome() {
      wx.switchTab({
        url: '/pages/tabbar/examples/index',
      })
    }
  },
  ready() {
    app.addMenuButtonRect(this)
    this.setData({
      routerLength: getCurrentPages().length
    })
    // 监听页面滚动
    const curPage = getCurrentPages()[getCurrentPages().length - 1]
    const that = this
    // 替换onPageScroll方法
    let superOnPageScroll = curPage.onPageScroll
    if(!curPage.onPageScroll){
      throw "注意:" +curPage.route + "页面没有申明onPageScroll方法, 无法正常触发组件navigationBar渐变效果"
    }
    curPage.onPageScroll = function (e) {
      // 触发父方法
      superOnPageScroll(e)
      const {
        scrollTop
      } = e
      // console.log("参数", scrollTop)
      const backgroundOpacity = scrollTop / 90
      // console.log("结果", backgroundOpacity >= 1 ? 1 : backgroundOpacity)
      that.setData({
        backgroundOpacity: backgroundOpacity >= 1 ? 1 : backgroundOpacity
      })
    }
  }
})